import classNames from 'classnames'
import './index.scss'
import dayjs from "dayjs";
import {useEffect, useMemo, useState} from "react";
import {billTypeToName} from "@/contant/bill";
import Icon from "@/Components/Icon";

const DayBill = ({date, daylist}) => {
    // 计算结余
    const DayResult = useMemo(() => {
        const pay = daylist.filter(item => item.type === 'pay').reduce((a, c) => a + c.money, 0)
        const income = daylist.filter(item => item.type === 'income').reduce((a, c) => a + c.money, 0)
        return {
            pay,
            income,
            total: pay + income
        }
    }, [daylist])
    // 控制列表展开和收起
    const [visible, setVisible] = useState(false)
    return (
        <div className={classNames('dailyBill')}>
            <div className="header">
                <div className="dateIcon">
                    <span className="date">{dayjs(daylist[0].date).format('MM月DD日')}</span>
                    {/*expand 控制箭头旋转*/}
                    <span className={classNames('arrow', visible ? 'expand' : '')}
                          onClick={() => setVisible(!visible)}></span>
                </div>
                <div className={"oneLineOverview"}>
                    <div className={"pay"}>
                        <span className={"type"}>支出</span>
                        <span className={"money"}>{DayResult.pay}</span>
                    </div>
                    <div className={"income"}>
                        <span className={"type"}>收入</span>
                        <span className={"money"}>{DayResult.income}</span>
                    </div>
                    <div className={"balance"}>
                        <span className={"money"}>{DayResult.total}</span>
                        <span className={"type"}>结余</span>
                    </div>
                </div>
            </div>
            {/*单日列表*/}
            <div className={"billList"} style={visible ? {display: "block"} : {display: "none"}}>
                {
                    daylist.map(item => {
                        return (
                            <div className={"bill"} key={item.id}>
                                {/*渲染图标*/}
                                <Icon type={item.remark}/>
                                <div className={"detail"}>
                                    <div className={"billType"}>{billTypeToName[item.remark]}</div>
                                </div>
                                <div className={classNames('money', item.type)}>
                                    {item.money.toFixed(2)}
                                </div>
                            </div>
                        )
                    })
                }

            </div>
        </div>
    )


}

export default DayBill
